<template>
	<view class="page">
		<!-- 自定义navbar -->
		<u-navbar title="我的" left-icon=' ' bg-color="transparent" :titleStyle="{color:'white'}"></u-navbar>
		<view class="custom-navbar">
			<image src="@/static/headerBg.png" class="navbar-background">
				<view class="userInfo">
					<view style="display: flex;align-items: center;">
						<image class="userPic" src="@/static/userPic.png" style="margin-right: 20rpx;"></image>
						<view class="nameInfo" v-if="isLogin">
							<text>{{userName}}</text>
							<text>{{phoneNum}}</text>
						</view>
						<view @click="toLogin" v-if='!isLogin'
							style="text-decoration: underline;margin-left:20rpx;color: #fff;">
							你好，请登录
						</view>
					</view>
					<u-icon v-if="isLogin" @click="toPerson" name="setting" color="#fff" size="22"></u-icon>
				</view>

			</image>
		</view>
		<!-- 页面内容 -->
		<view v-if="isLogin&&authority">


			<view class="countBar">
				<view class="countBarIndex">
					<view style="display: flex;margin-top: 10rpx;"><text>当天支付金额 </text><u-icon name="info-circle"
							color="#14979b" size="14"></u-icon></view>
					<view style="margin-top: 10rpx;display: flex;justify-content: flex-start;align-items: center;">
						<text
							style="font-size:40rpx; color: #14979b;">{{fianaceDataObject[5].dataCount||'0.00'}}</text>万
					</view>
					<text style="margin-top: 10rpx;color: #A3A3A3;">昨天 {{fianaceDataObject[6].dataCount||'0.00'}}万</text>
				</view>
				<view class="countBarIndex">
					<view style="margin-top: 10rpx;display: flex;"><text>当天成交店数 </text></view>
					<view style="margin-top: 10rpx;display: flex;justify-content: flex-start;align-items: center;">
						<text style="font-size:40rpx; color: #14979b;">{{fianaceDataObject[7].dataCount||'0'}}</text>家
					</view>
					<text style="margin-top: 10rpx;color: #A3A3A3;">昨天 {{fianaceDataObject[8].dataCount||'0'}}家</text>
				</view>
			</view>
			<view class="titleBar">
				<view class="cssBarStyle" :class='setTabsIndex == 0 ?"active":""' @click="setTabs(0)">
					销售金额
				</view>
				<view class="cssBarStyle" :class='setTabsIndex == 1 ?"active":""' @click="setTabs(1)">
					门店数量
				</view>
			</view>
			<view class="dataBar">
				<view class="dataTips">
					<image class='data_background' src="../../static/hunan.png"></image>
					<view class="data_contain">
						<view class="title" style="color: #F6A51B; background-color: #FDE3B5;">
							广东仓
						</view>
						<view class="text" v-if="setTabsIndex==0">
							<text class='textTitle'>交易金额</text>
							<text class='textCount'>{{saleTotalObject['2'].totalPrice||"-"}}</text>
						</view>
						<view class="text" v-if="setTabsIndex==1">
							<text class='textTitle'>门店数量</text>
							<text class='textCount'>{{storeObject['2'].storeNameCount||'-'}}</text>
						</view>
						<view class="lastData">
							<text>昨日</text>
							<text v-if="setTabsIndex==0">{{warehouseObject['2'].totalPrice||'-'}}</text>
							<text v-if="setTabsIndex==1">{{YesterdayStoreTotal['2'].storeNameCount||'-'}}</text>
						</view>
					</view>
				</view>
				<view class="dataTips">
					<image class='data_background' src="../../static/guangdong.png"></image>
					<view class="data_contain">
						<view class="title" style="color: #E2785D; background-color: #F8E0D8;">
							云南仓
						</view>
						<view class="text" v-if="setTabsIndex==0">
							<text class='textTitle'>交易金额</text>
							<text class='textCount'>{{saleTotalObject['5'].totalPrice||"-"}}</text>
						</view>
						<view class="text" v-if="setTabsIndex==1">
							<text class='textTitle'>门店数量</text>
							<text class='textCount'>{{storeObject['5'].storeNameCount||'-'}}</text>
						</view>
						<view class="lastData">
							<text>昨日</text>
							<text v-if="setTabsIndex==0">{{warehouseObject['5'].totalPrice||'-'}}</text>
							<text v-if="setTabsIndex==1">{{YesterdayStoreTotal['5'].storeNameCount||'-'}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="dataBar">
				<view class="dataTips">
					<image class='data_background' src="../../static/yunnan.png"></image>
					<view class="data_contain">
						<view class="title" style="color: #3E9FF4;">
							宁乡仓
						</view>
						<view class="text" v-if="setTabsIndex==0">
							<text class='textTitle'>交易金额</text>
							<text class='textCount'>{{saleTotalObject['1'].totalPrice||"-"}}</text>
						</view>
						<view class="text" v-if="setTabsIndex==1">
							<text class='textTitle'>门店数量</text>
							<text class='textCount'>{{storeObject['1'].storeNameCount||'-'}}</text>
						</view>
						<view class="lastData">
							<text>昨日</text>
							<text v-if="setTabsIndex==0">{{warehouseObject['1'].totalPrice||'-'}}</text>
							<text v-if="setTabsIndex==1">{{YesterdayStoreTotal['1'].storeNameCount||'-'}}</text>
						</view>
					</view>
				</view>
				<view class="dataTips">
					<image class='data_background' src="../../static/guizhou.png"></image>
					<view class="data_contain">
						<view class="title" style="color: #53c8d6;background-color: #D0EEEF;">
							重庆仓
						</view>
						<view class="text" v-if="setTabsIndex==0">
							<text class='textTitle'>交易金额</text>
							<text class='textCount'>{{saleTotalObject['10'].totalPrice||"-"}}</text>
						</view>
						<view class="text" v-if="setTabsIndex==1">
							<text class='textTitle'>门店数量</text>
							<text class='textCount'>{{storeObject['10'].storeNameCount||'-'}}</text>
						</view>
						<view class="lastData">
							<text>昨日</text>
							<text v-if="setTabsIndex==0">{{warehouseObject['10'].totalPrice||'-'}}</text>
							<text v-if="setTabsIndex==1">{{YesterdayStoreTotal['10'].storeNameCount||'-'}}</text>
						</view>
					</view>
				</view>
			</view>

			<view class="dataBar" style="padding-bottom: 40rpx;border-bottom-right-radius:20rpx ;
		border-bottom-left-radius:20rpx ;">
				<view class="dataTips">
					<image class='data_background' src="../../static/henan.png"></image>
					<view class="data_contain">
						<view class="title" style="color: #f87f6a;background-color: #FAE8E0;">
							贵州仓
						</view>
						<view class="text" v-if="setTabsIndex==0">
							<text class='textTitle'>交易金额</text>
							<text class='textCount'>{{saleTotalObject['11'].totalPrice||"-"}}</text>
						</view>
						<view class="text" v-if="setTabsIndex==1">
							<text class='textTitle'>门店数量</text>
							<text class='textCount'>{{storeObject['11'].storeNameCount||'-'}}</text>
						</view>
						<view class="lastData">
							<text>昨日</text>
							<text v-if="setTabsIndex==0">{{warehouseObject['11'].totalPrice||'-'}}</text>
							<text v-if="setTabsIndex==1">{{YesterdayStoreTotal['11'].storeNameCount||'-'}}</text>
						</view>
					</view>
				</view>
				<view class="dataTips">
					<image class='data_background' src="../../static/chongqing.png"></image>
					<view class="data_contain">
						<view class="title" style="color: #6A6DC8; background-color: #E3E7F8">
							河南仓
						</view>
						<view class="text" v-if="setTabsIndex==0">
							<text class='textTitle'>交易金额</text>
							<text class='textCount'>{{saleTotalObject['7'].totalPrice||"-"}}</text>
						</view>
						<view class="text" v-if="setTabsIndex==1">
							<text class='textTitle'>门店数量</text>
							<text class='textCount'>{{storeObject['7'].storeNameCount||'-'}}</text>
						</view>
						<view class="lastData">
							<text>昨日</text>
							<text v-if="setTabsIndex==0">{{warehouseObject['7'].totalPrice||"-"}}</text>
							<text v-if="setTabsIndex==1">{{YesterdayStoreTotal['7'].storeNameCount||"-"}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="financeData">
				<view class="financeTitle">
					<text
						style="display:block;width: 6rpx;height: 32rpx;background-color: #14979b;margin-left: 20rpx;border-radius: 20rpx ;"></text>
					<text style="display:block;color:#1E272E;margin-left: 10rpx;font-size: 28rpx;">财务数据</text>
				</view>
				<view class="financeContain">
					<view class="financeCard">
						<image class="financeBg" src="../../static/totalCount.png"></image>
						<view class="financeText">
							<view @tap="toPurTotal('purchaseTotal')"
								style="display: flex;justify-content: space-around;margin-top: 35rpx;">
								<text>采购总额</text><u-icon name="arrow-right" color="#1E272E" size="14"></u-icon>
							</view>
							<view style="margin-top: 90rpx;margin-left: 20rpx;">
								<text style="font-size: 34rpx;">{{fianaceDataObject[0].dataCount}}</text><text
									style="margin-left: 10rpx;font-size: 24rpx;">万</text>
							</view>
							<view class="lastData2">
								<text>昨天</text><text
									style="margin-left: 20rpx;">{{fianaceLastDataObject[0].dataCount}}万</text>
							</view>
						</view>

					</view>
					<view class="financeCard">
						<image class="financeBg" src="../../static/payAlready.png"></image>
						<view class="financeText">
							<view @tap="toAlreadyPur('alreadyPurchase')"
								style="display: flex;justify-content: space-around;margin-top: 35rpx;">
								<text>采购已付</text><u-icon name="arrow-right" color="#1E272E" size="14"></u-icon>
							</view>
							<view style="margin-top: 90rpx;margin-left: 20rpx;">
								<text style="font-size: 34rpx;">{{fianaceDataObject[1].dataCount}}</text><text
									style="margin-left: 10rpx;font-size: 24rpx;">万</text>
							</view>
							<view class="lastData2">
								<text>昨天</text><text
									style="margin-left: 20rpx;">{{fianaceLastDataObject[1].dataCount}}万</text>
							</view>
						</view>

					</view>
					<view class="financeCard">
						<image class="financeBg" src="../../static/storeCount.png"></image>
						<view class="financeText">
							<view @tap="toStoreCount('storeCount')"
								style="display: flex;justify-content: space-around;margin-top: 35rpx;">
								<text>门店数量</text><u-icon name="arrow-right" color="#1E272E" size="14"></u-icon>
							</view>
							<view style="margin-top: 90rpx;margin-left: 20rpx;">
								<text style="font-size: 34rpx;">{{fianaceDataObject[2].dataCount}}</text><text
									style="margin-left: 10rpx;font-size: 24rpx;">家</text>
							</view>
							<view class="lastData2">
								<text>昨天</text><text
									style="margin-left: 20rpx;">{{fianaceLastDataObject[2].dataCount}}家</text>
							</view>
						</view>

					</view>
				</view>
				<view class="financeContain" style="padding-bottom: 5rpx;">
					<view class="financeCard">
						<image class="financeBg" src="../../static/grossMargin.png"></image>
						<view class="financeText">
							<view @tap="toMaterialProfit('materialProfit')"
								style="display: flex;justify-content: space-around;margin-top: 35rpx;">
								<text>材料毛利</text><u-icon name="arrow-right" color="#1E272E" size="14"></u-icon>
							</view>
							<view style="margin-top: 90rpx;margin-left: 20rpx;">
								<text style="font-size: 34rpx;">{{fianaceDataObject[3].dataCount}}</text><text
									style="margin-left: 10rpx;font-size: 24rpx;">万</text>
							</view>
							<view class="lastData2">
								<text>昨天</text><text
									style="margin-left: 20rpx;">{{fianaceLastDataObject[3].dataCount}}万</text>
							</view>
						</view>

					</view>
					<view class="financeCard">
						<image class="financeBg" src="../../static/saleTotal.png"></image>
						<view class="financeText">
							<view @tap="toSaleTotal('saleTotal')"
								style="display: flex;justify-content: space-around;margin-top: 35rpx;">
								<text>销售总额</text><u-icon name="arrow-right" color="#1E272E" size="14"></u-icon>
							</view>
							<view style="margin-top: 90rpx;margin-left: 20rpx;">
								<text style="font-size: 34rpx;">{{fianaceDataObject[4].dataCount}}</text><text
									style="margin-left: 10rpx;font-size: 24rpx;">万</text>
							</view>
							<view class="lastData2">
								<text>昨天</text><text
									style="margin-left: 20rpx;">{{fianaceLastDataObject[4].dataCount}}万</text>
							</view>
						</view>

					</view>
					<view class="financeCard">
					</view>
				</view>
			</view>
		</view>




		<!-- 分割线 --><!-- 分割线 --><!-- 分割线 --><!-- 分割线 --><!-- 分割线 --><!-- 分割线 --><!-- 分割线 -->








		<view v-if="isLogin&&!authority">
			<view style="padding:20rpx">
				<u-divider text="我的订单" textColor="#13989A" lineColor="#13989A"></u-divider>
			</view>

			<scroll-view style='height: 800rpx;' v-if="saleList && !authority" scroll-y="true">
				<view v-for="(v,i) in saleList" :key="v.saleId" @click="orderDetail(v)">
					<view class='listContent' style="margin-left: 20rpx;">
						<view v-if="v.outStatus==1" :style="{'background':color,'color':'white'}"
							style="position: absolute;top:0;left:0;padding:0 2px;border-bottom-right-radius: 5rpx;">
							付
						</view>
						<view style="width: 100rpx;">
							{{v.storeContacts}}
						</view>
						<view style="width: 280rpx;text-decoration: underline;" :style='{"color":color}'>
							{{v.storeName}}
						</view>
						<view style="width: 100rpx;">
							<text v-if="v.saleType==1" :style="{'color':color}"> 报货</text>
							<text v-else style="color:#fa3534">补货</text>
						</view>
						<view style="width: 170rpx;">
							<view>{{v.createTime}}</view>
						</view>
						<view style="width: 200rpx;">
							<view>{{v.mobile}}</view>
						</view>
					</view>
				</view>
				<view class="bottomNotice" style="font-size: 23rpx;
				color: #14979b;margin-top: 30rpx;margin-left: 30%;">
								点击订单名称可查看订单详情
							</view>
			</scroll-view>
		</view>
	</view>
</template>
<script>
	let app = getApp();
	export default {

		data() {
			return {
				setTabsIndex: 0,
				userName: "",
				phoneNum: "",
				authority: "",
				isLogin: false,
				warehouseObject: {},
				YesterdayStoreTotal: {},
				saleTotalObject: {},
				fianaceDataObject: {},
				fianaceLastDataObject: {},
				storeObject: {},
				color: app.globalData.defaultColor,
				saleList: [],
			}
		},
		onLoad() {},
		onHide() {
			this.saleList = [];
		},
		onShow() {
			
			uni.$u.http.get('/user/userInfo').then(res => {
				if (res) {
					this.isLogin = true
				} else {
					this.isLogin = false
				}
				if(res.authorityAdmin){
					this.authority = res.authorityAdmin
				}else{
					this.authority = null
				}
				this.userName = res.userName
				this.phoneNum = res.phoneNum
				this.getYesterdayCount();
				this.getWxData();
				this.getFinanceCount();
			    this.getSaleList();
			})
		},
		methods: {
			setTabs(i) {
				this.setTabsIndex = i
				if (i == 1) {
					let YesterdayStoreTotal = {};
					uni.$u.http.get('/dataDetail/selectSaleWareHouseYesterdayStoreTotal').then(res => {
						res.saleWarehouseStoreCountList.forEach((item) => {
							YesterdayStoreTotal[item.warehouseId] = item;
						});
						this.YesterdayStoreTotal = YesterdayStoreTotal
					})
				} else if (i == 0) {
					this.getYesterdayCount()
				}
			},
			toPurTotal(el) {
				uni.navigateTo({
					url: '/pages/financeData/purchaseTotal'
				})
			},
			toAlreadyPur(el) {
				uni.navigateTo({
					url: '/pages/financeData/alreadyPurchase'
				})
			},
			toStoreCount(el) {
				uni.navigateTo({
					url: '/pages/financeData/storeCount'
				})
			},
			toSaleTotal(el) {
				uni.navigateTo({
					url: '/pages/financeData/saleTotal'
				})
			},
			toMaterialProfit(el) {
				uni.navigateTo({
					url: '/pages/financeData/materialProfit'
				})
			},
			getYesterdayCount() {
				let warehouseObject = {};
				uni.$u.http.get('/dataDetail/selectSaleWareHouseYesterdayTotal').then(res => {
					res.saleWarehouseTotalList.forEach((item) => {
						warehouseObject[item.warehouseId] = item;
					});
					this.warehouseObject = warehouseObject
				})

			},
			getWxData() {
				let saleTotalObject = {};
				let storeObject = {}
				uni.$u.http.get('/dataDetail/selectTodayWareHouseSaleStoreTotal').then(res => {
					res.saleOrStoreList.forEach((item) => {
						saleTotalObject[item.warehouseId] = item;
					});
					res.saleWarehouseStoreCountList.forEach(item => {
						storeObject[item.warehouseId] = item
					})
					this.saleTotalObject = saleTotalObject
					this.storeObject = storeObject
				})
			},
			getFinanceCount() {
				let fianaceDataObject = {}
				let fianaceLastDataObject = {}
				uni.$u.http.get('dataDetail/selectFinanceData').then(res => {
						res.forEach((item, index) => {
							if ([0, 1, 3, 4, 5, 6].includes(index)) {
								item.dataCount = (item.dataCount / 10000).toFixed(2)
							}
							fianaceDataObject[index] = item
						})
						this.fianaceDataObject = fianaceDataObject
					}),
					uni.$u.http.get('/dataDetail/selectYesterdayFinanceData').then(res => {
						res.forEach((item, index) => {
							if (item.dataCount == 0.02 || item.dataCount == 0.01) {
								item.dataCount = "0"
							}
							if ([0, 1, 3, 4].includes(index)) {
								item.dataCount = (item.dataCount / 10000).toFixed(2)
							}
							fianaceLastDataObject[index] = item
						})
						this.fianaceLastDataObject = fianaceLastDataObject
					})
			},
			toLogin() {
				uni.navigateTo({
					url: '/pages/login/index'
				})
			},
			getSaleList() {
				let params = {
					pageSize: 10000000,
					pageNumber: 1,
					type: 'wechat',
					// userName: this.userName
					userName: this.userName
				}
				uni.$u.http.get('/sale/weChatSaleList', {
					params: params
				}).then(res => {

					if (res.rows.length > 0) {
						res.rows.map(el => {
							if (el.remark.indexOf('remark') > -1) {
								el.remarkInfo = JSON.parse(el.remark);
								el.remark = JSON.parse(el.remark).remark;
							}
							el.createTime = el.createdAt.split(' ')[0]
						})
						this.saleList = res.rows;
						this.tipText = '左滑订单列表,查看订单详情'
					}
				})
			},
			orderDetail(v) {
				uni.navigateTo({
					url: '/pages/orderDetail/index?info=' + JSON.stringify(v)
				})
			},
			toPerson() {
				uni.navigateTo({
					url: '/pages/person/index'
				})
			},
		}
	}
</script>
<style>
	page {
		background: #f6f6f6;
	}
</style>
<style lang="scss" scoped>
	.custom-navbar {
		position: relative;
		width: 100%;
		height: 400rpx;
	}
	.navbar-background {
		position: absolute;
		width: 100%;
		height: 400rpx;
		top: 0;
		left: 0;
		z-index: 1;
	}

	.userInfo {
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: absolute;
		top: 180rpx;
		left: 40rpx;
		z-index: 2;
		width:calc(100% - 80rpx);
	}

	.userPic {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}

	.nameInfo {
		display: flex;
		flex-direction: column;
		color: #fff;
		margin-left: 10rpx;
	}

	.icon {
		margin-left: 300rpx;
	}

	.countBar {
		position: relative;
		width: 92%;
		padding: 15rpx 0;
		height: 160rpx;
		font-size: 24rpx;
		background-color: #fff;
		border-radius: 20rpx;
		display: flex;
		left: 30rpx;
		top: -100rpx;
		justify-content: space-around;
		z-index: 1000;
	}

	.countBarIndex {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
	}

	.titleBar {
		width: 92%;
		background-color: #fff;
		position: relative;
		left: 30rpx;
		top: -75rpx;
		border-radius: 10rpx;
		display: flex;
		border-radius: 20rpx 20rpx 0 0;
		justify-content: space-around;
	}

	.cssBarStyle {
		width: 50%;
		color: #14979b;
		height: 80rpx;
		font-size: 28rpx;
		background-color: #fff;
		line-height: 80rpx;
		text-align: center;
	}

	.cssBarStyle:nth-child(1) {
		border-top-left-radius: 20rpx;
		border-bottom-right-radius: 60rpx;
	}

	.cssBarStyle:nth-child(2) {
		border-bottom-left-radius: 60rpx;
		border-top-right-radius: 20rpx;
	}

	.active {
		background: #DEF0F1 !important;
		color: #13989A;
		transition: all 0.3s;
	}

	.dataBar {
		width: 92%;
		height: 300rpx;
		background-color: #fff;
		position: relative;
		left: 30rpx;
		top: -75rpx;
		display: flex;
		justify-content: space-evenly;
	}

	.dataBar:last-child {
		padding-bottom: 60rpx;
		border-radius: 0 0 20rpx 20rpx;
	}

	.title {
		width: 100%;
		height: 70rpx;
		line-height: 70rpx;
		font-size: 28rpx;
		font-weight: 500;
		border-top-right-radius: 10rpx;
		border-top-left-radius: 10rpx;
	}

	.textTitle {
		display: block;
		color: #616161;
		font-size: 28rpx;
		margin-top: 15rpx;
	}

	.textCount {
		display: block;
		color: #333;
		font-size: 30rpx;
		margin-top: 15rpx;
	}

	.lastData {
		width: 88%;
		height: 60rpx;
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-top: 1rpx solid #E0E0E0;
		color: #A3A3A3;
		margin-left: 6%;

		text {
			display: block;
		}
	}

	.dataTips {
		width: 46%;
		height: 270rpx;
		margin-top: 25rpx;
		text-align: center;
		position: relative;
	}

	.data_background {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
	}

	.data_contain {
		width: 100%;
		height: 100%;
		position: absolute;
		z-index: 1000;
	}

	.financeData {
		width: 92%;
		left: 30rpx;
		background-color: #fff;
		top: -45rpx;
		border-radius: 20rpx;
		position: relative;
		padding-bottom: 30rpx;
	}

	.financeTitle {
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.financeContain {
		width: 100%;
		margin-bottom: 30rpx;
		display: flex;
		justify-content: space-evenly;
	}

	.financeCard {
		width: 30%;
		height: 300rpx;
		border-radius: 20rpx;
	}

	.financeBg {
		position: absolute;
		z-index: 200;
		width: 210rpx;
		height: 300rpx;
	}

	.financeText {
		width: 210rpx;
		position: absolute;
		z-index: 2000;
		height: 300rpx;
	}

	.lastData2 {
		color: #A3A3A3;
		margin-top: 30rpx;
		margin-left: 20rpx;
		font-size: 26rpx
	}

	.listContent {
		display: flex;
		text-align: center;
		align-items: center;
		position: relative;
		font-size: 12px;
		padding: 30rpx 10rpx;
		border-bottom: 1rpx solid #eee;
	}

	.listContent>view {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		word-break: break-all;

	}
</style>